<template>
  <div>
    <mt-header fixed class="mtHeader" title="翰洁装饰有限公司">
      <div slot="left" class="left">苏州</div>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <router-view></router-view>
    <mt-tabbar fixed v-model="selected">
      <mt-tab-item id="sy">
        <img slot="icon" src="../assets/icons/home.svg" />
        首页
      </mt-tab-item>
      <mt-tab-item id="al">
        <img slot="icon" src="../assets/icons/home.svg" />
        精品案例
      </mt-tab-item>
      <mt-tab-item id="team">
        <img slot="icon" src="../assets/icons/home.svg" />
        服务团队
      </mt-tab-item>
      <mt-tab-item id="phone">
        <img slot="icon" src="../assets/icons/home.svg" />
        电话咨询
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'sy',
    }
  },
  watch: {
    selected(newVal) {
      // 这里就可以通过 val 的值变更来确定去向
      switch (newVal) {
        case 'sy':
          this.$router.push('/index/home')
          break
        case 'al':
          this.$router.push('/index/about')
          break
        case 'team':
          this.$router.push('/index/team')
          break
        case 'phone':
          this.$router.push('/index/phone')
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
div {
  .mtHeader {
    background-color: #da251e;
    font-size: 18px;
    .left {
      font-size: 17px;
    }
  }
}
</style>
